<template>
  <el-main>
    <div class="box">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item :name="1" v-if="hasPerm('sys:dictionary:noticetype')">
          <template slot="title">
            <h1 style="margin:10px 0px;">公告类型</h1>
          </template>
          <el-row>
            <draggable :list="noticeType" group="noticeType" ghostClass="noticeTypeGhost" :disabled="!noticeTypeDraggable" @start="dragging=true" @end="updateNoticeTypeSort">
              <div class="tag" :key="tag.id" v-for="tag in noticeType">
                <el-input
                  class="input-new-tag"
                  v-if="tag.isDelete==1"
                  v-model="tag.label"
                  :ref="tag.label"
                  @keyup.enter.native="$event.target.blur"
                  @blur="editNoticeType(tag)"
                />
                <el-button v-else class="button-new-tag" type="primary"  @click="showEditNoticeTypeInput(tag)">
                  {{tag.label}}
                  <i class="tagclose el-icon-close el-icon--right" @click="deleteNoticeType(tag)"></i>
                </el-button>
              </div>
            </draggable>
          </el-row>
          <el-row>
            <el-input
              class="input-new-tag"
              v-if="showNoticeTypeInput"
              v-model="newNoticeTypeValue"
              ref="noticeTypeInputRef"
              @keyup.enter.native="$event.target.blur"
              @blur="addNoticeType"
            >
            </el-input>
            <el-button v-else class="button-new-tag" @click="showNoticeTypesInput">
              <i class="el-icon-plus el-icon--left"></i>
              添加
            </el-button>
          </el-row>
        </el-collapse-item>

        <el-collapse-item :name="2" v-if="hasPerm('sys:dictionary:category')">
          <template slot="title">
            <h1 style="margin:10px 0px;">运动类别</h1>
          </template>
          <el-row>
            <draggable :list="categories" group="categories" ghostClass="categoryGhost" :disabled="!categoriesDraggable" @start="dragging=true" @end="updateCategoriesSort">
              <div class="tag" :key="tag.id" v-for="tag in categories">
                <el-input
                  class="input-new-tag"
                  v-if="tag.isDelete==1"
                  v-model="tag.label"
                  :ref="tag.label"
                  @keyup.enter.native="$event.target.blur"
                  @blur="editCategory(tag)"
                />
                <el-button v-else class="button-new-tag" :type="tag.sort | chooseTagsColor"  @click="showEditCategoryInput(tag)">
                  {{tag.label}}
                  <i class="tagclose el-icon-close el-icon--right" @click="deleteCategory(tag)"></i>
                </el-button>
              </div>
            </draggable>
          </el-row>
          <el-row>
            <el-input
              class="input-new-tag"
              v-if="showCategoriesInput"
              v-model="newCategoriesValue"
              ref="categoriesInputRef"
              @keyup.enter.native="$event.target.blur"
              @blur="addCategory"
            >
            </el-input>
            <el-button v-else class="button-new-tag" @click="showCategoryInput">
              <i class="el-icon-plus el-icon--left"></i>
              添加
            </el-button>
          </el-row>
        </el-collapse-item>

        <el-collapse-item :name="3" v-if="hasPerm('sys:dictionary:time')">
          <template slot="title">
            <h1 style="margin:10px 0px;">场馆开放时间段</h1>
          </template>
          <el-row>
            <draggable :list="times" group="times" ghostClass="timeGhost" :disabled="!timesDraggable" @start="dragging=true" @end="updateTimesSort">
              <div class="tag" :key="tag.id" v-for="tag in times">
                <el-input
                  class="input-new-tag"
                  v-if="tag.isDelete==1"
                  v-model="tag.time"
                  :ref="tag.time"
                  @keyup.enter.native="$event.target.blur"
                  @blur="editTime(tag)"
                />
                <el-button v-else class="button-new-tag" type="info"  @click="showEditTimeInput(tag)">
                  {{tag.time}}
                  <i class="tagclose el-icon-close el-icon--right" @click="deleteTime(tag)"></i>
                </el-button>
              </div>
            </draggable>
          </el-row>
          <el-row>
            <el-input
              class="input-new-tag"
              v-if="showTimesInput"
              v-model="newTimesValue"
              ref="timesInputRef"
              @keyup.enter.native="$event.target.blur"
              @blur="addTimes"
            >
            </el-input>
            <el-button v-else class="button-new-tag" @click="showTimeInput">
              <i class="el-icon-plus el-icon--left"></i>
              添加
            </el-button>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-main>
</template>

<script>
import draggable from 'vuedraggable'
import {
  getNoticeTypeApi,
  addNoticeTypeApi,
  editNoticeTypeApi,
  sortNoticeTypeApi,
  deleteNoticeTypeApi
} from "@/api/notice";
import {
  getCategoryApi,
  addCategoryApi,
  editCategoryApi,
  sortCategoryApi,
  deleteCategoryApi
} from "@/api/category";
import {
  getTimesApi,
  addTimesApi,
  editTimesApi,
  sortTimesApi,
  deleteTimesApi
} from "@/api/times";
  export default {
    components: { draggable },
    data(){
      return{
        activeNames:[],

        //场馆开放时间段
        noticeType: [],
        showNoticeTypeInput: false,
        newNoticeTypeValue: '',
        backupNoticeTypeValue:'',
        noticeTypeDraggable: true,

        //运动类别
        categories: [],
        showCategoriesInput: false,
        newCategoriesValue: '',
        backupCategoriesValue:'',
        categoriesDraggable: true,
        //场馆开放时间段
        times: [],
        showTimesInput: false,
        newTimesValue: '',
        backupTimesValue:'',
        timesDraggable: true,

        dragging: false,
      }
    },
    methods:{
      //显示公告类型
      showEditNoticeTypeInput(tag){
        tag.isDelete = 1;
        this.$nextTick(_ => {
          this.backupNoticeTypeValue = tag.label;
          this.$refs[tag.label][0].focus();
          this.noticeTypeDraggable = false;
        });
      },
      //显示修改运动类别框
      showEditCategoryInput(tag){
        tag.isDelete = 1;
        this.$nextTick(_ => {
          this.backupCategoriesValue = tag.label;
          this.$refs[tag.label][0].focus();
          this.categoriesDraggable = false;
        });
      },
      //显示修改场馆开放时间段框
      showEditTimeInput(tag){
        tag.isDelete = 1;
        this.$nextTick(_ => {
          this.backupTimesValue = tag.time;
          this.$refs[tag.time][0].focus();
          this.timesDraggable = false;
        });
      },
      //修改公告类型
      async editNoticeType(tag){
        if(tag.label!=""&&tag.label!=null&&tag.label!==this.backupNoticeTypeValue){
          let res = await editNoticeTypeApi(tag)
          if(res&&res.code==200){
            this.$message.success(res.msg);
            this.getNoticeType();
          }
        }else{
          tag.label = this.backupNoticeTypeValue;
          this.backupNoticeTypeValue = '';
        }
        tag.isDelete=0;
        this.noticeTypeDraggable = true;
      },
      //修改运动类别排序
      async editCategory(tag){
        if(tag.label!=""&&tag.label!=null&&tag.label!==this.backupCategoriesValue){
          let res = await editCategoryApi(tag)
          if(res&&res.code==200){
            this.$message.success(res.msg);
            this.getCategory();
          }
        }else{
          tag.label = this.backupCategoriesValue;
          this.backupCategoriesValue = '';
        }
        tag.isDelete=0;
        this.categoriesDraggable = true;
      },
      //修改场馆开放时间段
      async editTime(tag){
        if(tag.time!=""&&tag.time!=null&&tag.time!==this.backupTimesValue){
          let res = await editTimesApi(tag)
          if(res&&res.code==200){
            this.$message.success(res.msg);
            this.getTimes();
          }
        }else{
          tag.time = this.backupTimesValue;
          this.backupTimesValue = '';
        }
        tag.isDelete=0;
        this.timesDraggable = true;
      },
      //删除公告类型
      async deleteNoticeType(tag){
        let confirm = await this.$myconfirm(`确定删除公告类型【${tag.label}】？`);
        if (confirm) {
          let res = await deleteNoticeTypeApi({id:tag.id});
          if(res&&res.code==200){
            this.$message.success(res.msg);
            this.noticeType.splice(this.noticeType.indexOf(tag),1);
            this.noticeType = this.sortArrays(this.noticeType );
            await sortNoticeTypeApi(this.noticeType);
            this.getNoticeType();
          }
        }
      },
      //删除运动类别排序
      async deleteCategory(tag){
        let confirm = await this.$myconfirm(`确定删除【${tag.label}】运动类别？`);
        if (confirm) {
          let res = await deleteCategoryApi({id:tag.id});
          if(res&&res.code==200){
            this.$message.success(res.msg);
            this.categories.splice(this.categories.indexOf(tag),1);
            this.categories = this.sortArrays(this.categories );
            await sortCategoryApi(this.categories);
            this.getCategory();
          }
        }
      },
      //删除场馆开放时间段
      async deleteTime(tag){
        let confirm = await this.$myconfirm(`确定删除开放时间段【${tag.time}】？`);
        if (confirm) {
          let res = await deleteTimesApi({id:tag.id});
          if(res&&res.code==200){
            this.$message.success(res.msg);
            this.times.splice(this.times.indexOf(tag),1);
            this.times = this.sortArrays(this.times );
            await sortTimesApi(this.times);
            this.getTimes();
          }
        }
      },
      //更新公告类型排序
      async updateNoticeTypeSort({oldIndex,newIndex}){
        this.noticeTypeDraggable = true;
        if(oldIndex!=newIndex){
          this.noticeType = this.sortArrays(this.noticeType);
          let res = await sortNoticeTypeApi(this.noticeType);
          if(res&&res.code==200){
            this.$message.success(res.msg)
            this.getNoticeType();
          }
        }
        this.dragging=false
        this.noticeTypeDraggable = true;
      },
      //更新运动类别排序
      async updateCategoriesSort({oldIndex,newIndex}){
        this.categoriesDraggable = false;
        if(oldIndex!=newIndex){
          this.categories = this.sortArrays(this.categories);
          let res = await sortCategoryApi(this.categories);
          if(res&&res.code==200){
            this.$message.success(res.msg);
            this.getCategory();
          }
        }
        this.dragging=false
        this.categoriesDraggable = true;
      },
      //更新场馆开放时间段排序
      async updateTimesSort({oldIndex,newIndex}){
        this.timesDraggable = true;
        if(oldIndex!=newIndex){
          this.times = this.sortArrays(this.times);
          let res = await sortTimesApi(this.times);
          if(res&&res.code==200){
            this.$message.success(res.msg)
            this.getTimes();
          }
        }
        this.dragging=false
        this.timesDraggable = true;
      },
      //重新排序
      sortArrays(arr){
        let newArr = arr;
        newArr.forEach((item,index)=>{
          item.sort = index + 1;
        })
        return newArr;
      },
      //点击自动聚焦
      showNoticeTypesInput() {
        this.showNoticeTypeInput = true;
        this.$nextTick(_ => {
          this.$refs.noticeTypeInputRef.$refs.input.focus();
        });
      },
      //点击自动聚焦
      showCategoryInput() {
        this.showCategoriesInput = true;
        this.$nextTick(_ => {
          this.$refs.categoriesInputRef.$refs.input.focus();
        });
      },
      //点击自动聚焦
      showTimeInput() {
        this.showTimesInput = true;
        this.$nextTick(_ => {
          this.$refs.timesInputRef.$refs.input.focus();
        });
      },
      //添加公告类型
      async addNoticeType() {
        let inputValue = this.newNoticeTypeValue;
        if (inputValue) {
          let parm = {
            label:inputValue,
            sort:this.noticeType.length+1
          }
          let res = await addNoticeTypeApi(parm)
          if(res&&res.code==200){
            this.$message.success(res.msg);
            // this.noticeType.push(parm);
            this.newNoticeTypeValue = '';
            this.getNoticeType();
          }
        }
        this.showNoticeTypeInput = false;
      },
      //添加运动类别
      async addCategory() {
        let inputValue = this.newCategoriesValue;
        if (inputValue) {
          let parm = {
            label:inputValue,
            sort:this.categories.length+1
          }
          let res = await addCategoryApi(parm)
          if(res&&res.code==200){
            this.$message.success(res.msg);
            // this.categories.push(parm);
            this.newCategoriesValue = '';
            this.getCategory();
          }
        }
        this.showCategoriesInput = false;
      },
      //添加场馆开放时间段
      async addTimes() {
        let inputValue = this.newTimesValue;
        if (inputValue) {
          let parm = {
            time:inputValue,
            sort:this.times.length+1
          }
          let res = await addTimesApi(parm)
          if(res&&res.code==200){
            this.$message.success(res.msg);
            // this.times.push(parm);
            this.newTimesValue = '';
            this.getTimes();
          }
        }
        this.showTimesInput = false;
      },
      //点击时更新
      async handleChange(){
        if(this.activeNames.indexOf(1) > -1){
          this.getNoticeType();
        }
        if(this.activeNames.indexOf(2) > -1){
          this.getCategory();
        }
        if(this.activeNames.indexOf(3) > -1){
          this.getTimes();
        }
      },
      //获取公告类型
      async getNoticeType(){
        let res = await getNoticeTypeApi();
        if(res && res.code == 200) {
          this.noticeType = res.data;
        }
      },
      //获取运动类型
      async getCategory(){
        let res = await getCategoryApi();
        if(res && res.code == 200) {
          this.categories = res.data;
        }
      },
      //获取场馆开放时间段
      async getTimes(){
        let res = await getTimesApi();
        if(res && res.code == 200) {
          this.times = res.data;
        }
      }
    },
    filters:{
      chooseTagsColor(value){
        if(value){
          switch(value%3){
              case 0: return 'primary';
              case 1: return 'success';
              case 2: return 'danger';
          }
         }else{
          return 'warning'
        }
      },
    }

  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-collapse-item__header{
    height: 60px;
  }
  .box{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin: 20px 40px;
    padding: 30px;
    .tag{
      display: inline;
      margin-right: 10px;
    }
    .button-new-tag {
      margin-top: 20px;
      height: 36px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
      .tagclose{
        border-radius:50%;
        padding: 2px;
        &:hover{
          background-color:#304156;
        }
      }
    }
    .input-new-tag {
      width: 100px;
      margin-top: 20px;
      vertical-align: bottom;
    }
    .noticeTypeGhost .categoryGhost , .timeGhost{
      opacity: 0.3;
    }
  }

</style>
